<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 服务管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/addserve' }">发布服务</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="AddServe">

            <header>
                <div>
                </div>
                <el-button type="primary" @click="back">返回</el-button>

            </header>
            <el-form ref="form" :rules="rules" label-position="right" :model="form" label-width="90px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="商家名称:" prop="name">
                            <el-select v-model="form.name" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in initNames" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="服务分类:" prop="typename">
                            <el-select v-model="form.typename" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in initTypes" :key="item.id" :label="item.typename" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="服务项目:" prop="serviceItem">
                            <el-input v-model="form.serviceItem"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="7">
                        <el-form-item label="原价:" prop="originalPrice">
                            <el-input v-model.number="form.originalPrice"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="7">
                        <el-form-item label="现价:" prop="presentPrice">
                            <el-input v-model.number="form.presentPrice"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="7">
                        <el-form-item label="服务介绍:" prop="content">
                            <el-input type="textarea" v-model="form.content"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button @click="back">取消</el-button>
                <el-button type="primary" @click="addServeBtn">保存</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
import { selectmer, selectservicetype, addservice } from '@/api/serveManager'
export default {
    components: { selectmer, selectservicetype, addservice },
    mounted() {
        this.initName()
        this.initType()



    },
    methods: {
        // 动态渲染商家名称下拉框
        async initName() {
            let result = await selectmer()
            if (result.code == 200) {
                this.initNames = result.data
            }
        },
        // 渲染服务分类
        async initType() {
            let result = await selectservicetype()
            if (result.code == 200) {
                this.initTypes = result.data
            }
        },
        // 添加服务
        async addServe() {
            // 创建当前日期
            this.today = new Date().toLocaleDateString().replaceAll('/', '-');

            let result = await addservice(this.$qs.stringify({
                mid: this.form.name,
                typeid: this.form.typename,
                serviceItem: this.form.serviceItem,
                originalPrice: this.form.originalPrice,
                presentPrice: this.form.presentPrice,
                content: this.form.content,
                createDate: this.today,
                sort: 4
            }))
            if (result.code == 200) {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });

                setTimeout(() => {
                    this.back()
                }, 500)

            } else {
                this.$message.error('添加失败');
            }

        },
        // 添加服务按钮
        async addServeBtn() {

            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.addServe()

                } else {
                    return false;
                }
            });

        },
        // 返回
        back() {
            this.$router.push('/service');
        }

    },
    data() {
        return {
            initNames: [],
            initTypes: [],
            form: {
                name: '',
                typename: '',
                serviceItem: '',
                originalPrice: '',
                presentPrice: '',
                content: ''
            },
            rules: {
                name: [
                    { required: true, message: '请选择商家名称', trigger: 'change' },
                ],
                typename: [
                    { required: true, message: '请选择服务分类', trigger: 'change' }
                ],
                serviceItem: [
                    { required: true, message: '请输入服务项目', trigger: 'blur' }
                ],
                originalPrice: [
                    { required: true, message: '请输入原价', trigger: 'blur' },
                    { type: 'number', message: '请输入数字形式', trigger: 'blur' }
                ],
                presentPrice: [
                    { required: true, message: '请输入现价', trigger: 'blur' },
                    { type: 'number', message: '请输入数字形式', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请填写服务介绍', trigger: 'blur' }
                ]
            },
            today: ''
        }
    },
}
</script>

<style scoped>
.AddServe {
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 90%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 20px;
}
</style>